<template>
    <div></div>
</template>
<script>
import moment from 'moment'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
// import store from '@/store'
export default {
  name: 'NotifySocket',
  components: {},
  props: {

  },
  data () {
    return {
      stompClient: {},
      visible: false,
      percent: 0,
      token: ''
    }
  },
  created () {
    this.token = this.$store.getters.token
    this.initWebSocket()
  },
  watch: {

  },
  methods: {
    moment,
    confirm () {
      this.notifyMsg = []
      this.percent = 0
    },
    cancel () {
      this.notifyMsg = []
      this.percent = 0
    },
    send (msg) {
      this.stompClient.send('/app/socket/send', {}, '广播内容')
    },
    sendPoint (s) {
      this.stompClient.send('/app/socket/sendChatMsgByOwn', {}, '广播内容')
    },
    initWebSocket () {
      this.connection()
      // 需要有一个失败重连得到问题
    },
    connection () {
      // 更换that指针
      const that = this
      const socket = new SockJS(process.env.VUE_APP_API_BASE_URL + '/thinkit-cms/stomp?token=' + this.token, null, { timeout: 20000 })
      this.stompClient = Stomp.over(socket)
      // this.stompClient.hasDebug = null
      // 建立连接，订阅主题
      this.stompClient.connect({}, (frame) => {
        this.stompClient.subscribe('/user/queue/msg', (val) => {
          const notifyMsg = JSON.parse(val.body)
          that.showNotifyMsg(notifyMsg)
        })
        this.stompClient.subscribe('/topic/sub', function (response) {
          //  alert('socker 链接失败')
             console.log(response)
        })
      })
      // 回调函数 3 end
    },
    showNotifyMsg (notifyMsg) {
      const _this = this
      const key = this.token
      this.$notification.open({
              key,
              message: notifyMsg.channerName + '静态化通知',
              description: _this.getProgress(notifyMsg),
              placement: 'bottomRight',
              duration: 60,
              btn: h => {
                        return h(
                          'a-button',
                          {
                            props: {
                              type: 'primary',
                              size: 'small'
                            },
                            on: {
                              click: () => _this.$notification.close(key)
                            }
                          },
                          '确定'
                        )
              }
      })
      // if (notifyMsg.percent === 100) {
      //   _this.visible = false
      //   _this.$notification.close(_this.token)
      // }
    },
    getProgress (notifyMsg) {
       const html = () => {
           return (
             <div><a-progress status="active" percent={notifyMsg.percent} size="small"/>
                 <span>{notifyMsg.destPath} <br/> {notifyMsg.msg}</span>
             </div>
           )
       }
       return html
    }
  }
}
</script>
